<template>
    <div class="films-box">
        <div class="list-name">
            <span>热门电影</span>
        </div>
        <FilmList class="content-list" :list="products" />
        <input type="button" value="加载下一页" @click="loadOtheDatas()" />
    </div>
</template>
<script>
import FilmList from "../components/FilmList.vue";
import axios from "axios";
export default {
    data() {
        return {
            products: [],
            dataFlag: true,
            params: {
                size: 9,
                no: 1
            }
        };
    },
    components: {
        FilmList
    },
    methods: {
        loadFilmList1() {
            // 完成异步请求的定义
            // 基于axios 内置的ajax请求方法进行异步数据加载
            //      axios.get(url[, config])
            //          url 请求地址
            //          config 请求配置

            let p = axios.get("/data/films.json");
            //    axios的所有请求方法都是基于 promise 对象封装
            //    所有的请求方法 都会 返回一个 已知的promise对象
            //    因此axios的请求处理将使用 promise 的状态进行管理
            //      pending 描述请求发送以执行完成，等待后续的数据处理
            //      reslove 描述执行成功，进行成功方法的调用和执行 => .then(第一个回调,)
            //      reject 描述执行失败，进行失败方法的调用和执行 => .then(,第二回调)或者.catch()方法

            // console.log(p)
            p.then(response => {
                // console.log(response);
                /*
                    1、HTTP协议状态
                        资源404，会不进行ajax发送，直接由浏览器报错
                    // 和ajax有关的请求状态
                    2、请求状态
                        请求正常发送，但是对于的服务器请求出现了问题 例如 500 
                    3、逻辑状态
                        请求的发送和响应是正常的，但数据执行逻辑出现错误
                */
                if (response.statusText != "OK") {
                    return Promise.reject(new Error("服务器出现故障"));
                }
                if (!response.data.resultState) {
                    return Promise.reject(new Error(response.data.msg));
                }
                console.log("------>请求成功", response.data);
                this.products = response.data.result;
            }).catch(error => {
                // axios 请求执行失败后，方法默认接受一个失败对象
                // 对象中封装了失败的原因，时间，状态，消息……
                console.log("----->请求失败:", error);
                // axios 的prmoise的回调方法中 this 被重新定义为 undefined 所以用箭头函数改变this指向
                // console.log(this)
                this.$showTip("网络连接失败，请稍后再试");
            });
        },
        loadFilmList2() {
            var baseUrl =
                process.env.NODE_ENV === "production"
                    ? "http://127.0.0.1:80"
                    : "/api";
            axios
                .get(baseUrl + "/filmApi/loadFilms.php")
                .then(({ statusText, data: { resultState, result, msg } }) => {
                    if (statusText != "OK") {
                        return Promise.reject(new Error("服务器出现故障"));
                    }
                    if (!resultState) {
                        return Promise.reject(new Error(msg));
                    }
                    this.products = result;
                })
                .catch(error => {
                    console.log("------->请求失败:", error); // 开发者查看
                    this.$showTip("网络连接失败，请稍后重试");
                });
        },
        loadFilmList() {
            if (!this.dataFlag) {
                this.$showTip("没有更多数据了");
                return;
            }

            axios
                .get("/filmApi/loadFilms.php", {
                    baseURL:
                        process.env.NODE_ENV === "production"
                            ? "http://127.0.0.1:80"
                            : "/api",
                    params: this.params
                })
                .then(({ statusText, data: { resultState, result, msg } }) => {
                    if (statusText != "OK") {
                        return Promise.reject(new Error("服务出现故障"));
                    }
                    if (!resultState) {
                        // return Promise.reject(new Error("请求配置错误"));
                        return Promise.reject(new Error(msg));
                    }
                    // this.products = result;
                    if (result.length < this.params.size) {
                        this.dataFlag = false;
                    }
                    this.products = this.products.concat(result);
                })
                .catch(error => {
                    console.log("------->请求失败:", error); // 开发者查看
                    this.$showTip("网络连接失败，请稍后重试");
                });
        },
        loadOtheDatas() {
            if (!this.dataFlag) {
                this.$showTip("没有更多数据了");
                return;
            }
            this.params.no += 1;
            this.loadFilmList();
        }
    },
    mounted() {
        // 再生命周期钩子函数中执行初始化请求操作
        this.loadFilmList();
    }
};
</script>
<style lang="less" scope>
.films-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.content-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    width: 100%;
    font-size: 0rem;
    > * {
        margin-top: 0.2rem;
    }
}
</style>